{extend name="addon/servicer/servicer/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="SERVICER_CSS/iconfont.css" />
{/block}
{block name="main"}
<style type="text/css">
	.chat-content-center-top{width: 100%;height: 53px;background: #ffffff;border-bottom: 1px solid #E5E5E5;display: flex;align-items: flex-end;padding: 0 10px;box-sizing: border-box;overflow-x: auto;}
	.layui-layout-admin .layui-body div.ns-body-content{width:100%;height:100%;min-height:0;min-width:0;box-sizing:border-box;padding:0}
	.chat-history-box{width:100%;height:100%;display:flex}
	.chat-history-box .history-person{width:350px;height:100%;border-right:1px solid #e5e5e5}
	.history-person .title{width:100%;height:53px;background:#f3f3f3;padding:0 10px;box-sizing:border-box;line-height:53px;border-bottom:1px solid #e5e5e5}
	.history-person .flow-default{width:100%;height:100%;background:#fff;overflow:scroll}
	.history-person .flow-default::-webkit-scrollbar{display:none}
	.history-person .flow-default li{width:100%}
	.history-person .flow-default li .content-people{width:100%;height:70px;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 30px 0 15px;box-sizing:border-box;border-bottom:1px solid #e5e5e5;cursor:pointer}
	.history-person .flow-default li .content-people img{width:40px;height:40px;border-radius:50%}
	.history-person .flow-default li .content-people .people-info{width:calc(100% - 40px);height:100%;padding-left:10px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
	.history-person .flow-default li .content-people .people-info .name{width:100%;display:flex;justify-content:space-between;align-items:center}
	.history-person .flow-default li .content-people .people-info .name .left{font-size:14px;max-width:calc(100% - 50px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
	.history-person .flow-default li .content-people .people-info .name .right{font-size:12px;color:#838383}
	.history-person .flow-default li .content-people .people-info .message{width:calc(100% - 10px);font-size:12px;color:#838383;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}
	.chat-history-box .chat-content{width:calc(100% - 240px);overflow:hidden}
	.chat-content .header{width:100%;height:53px;display:flex;align-items:flex-end;overflow-x:scroll;border-bottom:1px solid #e5e5e5;box-sizing:border-box}
	.chat-content .header .chat-people{display:inline-block;padding:6px 12px;background:#f3f3f3;border:1px solid #e5e5e5;box-sizing:border-box;position:relative}
	.chat-content .header .chat-people .chat-people-box{width:100%;height:100%;display:flex;align-items:center}
	.chat-content .header .chat-people.active{background:#fff;border-bottom:1px solid #fff}
	.chat-content .header .chat-people .name{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
	.chat-content .header .chat-people .close{background:#f5f5f5;border-radius:50%;padding:3px;color:red;margin-left:6px}
	.chat-content .header::-webkit-scrollbar{display:none}
	.chat-content .chat-content-box{width:100%;height:calc(100% - 53px);padding:0 30px 0 15px;box-sizing:border-box;overflow-y:scroll}
	.chat-content .chat-content-box .chat-massage-box{width:100%;background:#fff;display:flex;align-items:flex-start;margin-top:20px}
	.chat-content .chat-content-box .chat-massage-box.active{width:100%;background:#fff;display:flex;align-items:flex-start;margin-top:20px;flex-direction:row-reverse}
	.chat-content .chat-content-box .chat-massage-box.active .name{text-align:right}
	.chat-content .chat-content-box .chat-massage-box:last-child{margin-bottom:20px}
	.chat-content .chat-content-box .chat-massage-box img{width:40px;height:40px;border-radius:50%}
	.chat-content .chat-content-box .chat-massage-box .message-info{width:80%;padding-left:10px;box-sizing:border-box}
	.chat-content .chat-content-box .chat-massage-box.active .message-info{padding-right:10px}
	.chat-content .chat-content-box .chat-massage-box .message-info .name{color:#4685fd;font-size:14px;margin-bottom:10px}
	.chat-content .chat-content-box .chat-massage-box .message-info .name.active{color:#3db272}
	.chat-content .chat-content-box .chat-massage-box .message-info .message{font-size:12px}
	.chat-content .chat-content-box .chat-massage-box.active .message-info .message{font-size:12px;text-align:right}
	.goods-info-box{display:flex;flex-direction:column;align-items:center;border:1px solid #e5e5e5;box-sizing:border-box;padding:10px 15px;border-radius:10px;width:240px;height:300px}
	.goods-info-box img{width:200px;height:200px}
	.goods-info-box .goods-price{width:200px;line-height:35px;color:red;font-size:16px}
	.goods-info-box .goods-name{width:200px;font-size:14px;font-weight:600;text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
	.goods-info-box .goods-desc{width:200px;font-size:12px;margin-top:5px;color:#838383;text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}
	.order-info-title{width:100%;line-height:50px;font-size:14px;text-align:center}
	.order-info-box{display:flex;align-items:center;border:1px solid #e5e5e5;box-sizing:border-box;padding:10px 15px;border-radius:10px}
	.order-info-box img{width:90px;height:90px}
	.order-info-box .order-info{width:200px;margin-left:10px;height:90px;display:flex;flex-direction:column;justify-content:space-between}
	.order-info-box .follow-color{color:red}
	.message .goods-info-box{width:250px;float:left;text-align:left}
	.active .message .goods-info-box{width:250px;float:right;text-align:left}
	.message .goods-info-box img{width:200px!important;height:200px!important}
	.goods-info-box{display:flex;flex-direction:column;align-items:center;border:1px solid #e5e5e5;box-sizing:border-box;padding:10px 15px;border-radius:10px}
	.goods-info-box img{width:200px;height:200px}
	.goods-info-box .goods-price{width:200px;line-height:35px;color:red;font-size:16px}
	.goods-info-box .goods-name{width:200px;font-size:14px;font-weight:600;text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
	.goods-info-box .goods-desc{width:200px;font-size:12px;margin-top:5px;color:#838383;text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}
	.message .order-info-box{display:flex;align-items:center;border:1px solid #e5e5e5;box-sizing:border-box;padding:10px 15px;border-radius:10px;margin-top:10px}
	.message .order-info-box img{width:90px;height:90px}
	.message .order-info-box .order-info{width:200px;margin-left:10px;height:90px;display:flex;flex-direction:column;justify-content:space-between}
	.message .order-info-box .follow-color{color:red}
	.no-servicer{width:100%;height:calc(100% - 53px);display:flex;justify-content:center;align-items:center}
	.message-info .message .stringMessage img{display:inline-block;width:20px;height:20px}

</style>
<div class="chat-history-box">
	<div class="history-person">
		<div class="chat-content-center-top"><!----></div>
		<div class="title">历史联系人</div>
		<ul class="flow-default" id="LAY_demo1">
			<li>
				<div class="content-people" v-for="(item,index) in offlineMembers" :key="index" @click="openChat(item)">
					<img :src="item.headimg" onerror=src="SERVICER_IMG/default_headimg.png">
					<div class="people-info">
						<div class='name'>
							<div class="left">{{item.member_name}}</div>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="chat-content">
		<div class="header">
			<div class="chat-people" :class="item.select?'active':''" @click="selectTab(item)" v-for="(item,index) in selectMemberList" :key="index">
				<div class="chat-people-box">
					<div class='name'>{{item.member_name}}</div>
					<div class="close iconfont iconclose" @click="closeChat(item,index)"></div>
				</div>
			</div>
		</div>
		<div class="no-servicer" v-show="!selectMemberList.length">
			<img src="SERVICER_IMG/no_servicer.png" alt="">
		</div>
		<div class="chat-content-box" v-show="selectMemberList.length">
			<div class="chat-content-box-con">
				<div class="chat-massage-box" :class="item.type==1?'active':''" v-for="(item,index) in chatMessageList" :key="index">
					<img :src="shopInfo.logo" v-if="item.type==1" onerror=src="SERVICER_IMG/default_shop.png">
					<img :src="selectMember.headimg" v-else onerror=src="SERVICER_IMG/default_headimg.png">
					<div class="message-info">
						<div class='name'>
							<span>{{item.type==1?shopInfo.site_name:selectMember.member_name}}</span>
							<span>{{item.create_day}} {{item.create_time}}</span>
						</div>
						<div class="message">
							<chat-goods v-if="item.goods_sku_id" :sku-id="item.goods_sku_id"></chat-goods>
							<chat-order v-else-if="item.order_id" :order-id="item.order_id"> </chat-order>
							<div class="stringMessage" v-else v-html="item.type==1?dealmessage(item.servicer_say):dealmessage(item.consumer_say)"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		let height = $('.ns-body-content').height();
		$('.chat-content').css('height', height);
		$('.history-person .flow-default').css('height', (height - 53));
		$('.chat-content .chat-content-box').css('height', (height - 53));
		$(".chat-content-box-con").css('minHeight', (height - 50));
	});

	var goodsTemplate = '<div class="goods-info-box">';
	goodsTemplate += '<img :src="goodsInfo.sku_image">';
	goodsTemplate += '<div class="goods-price">￥{{goodsInfo.price}}</div>';
	goodsTemplate += '<div class="goods-name">{{goodsInfo.sku_name}}</div>';
	goodsTemplate += '<div class="goods-desc">{{goodsInfo.introduction}}</div>';
	goodsTemplate += '</div>';

	Vue.component('chat-goods', {
		props: {
			skuId: {
				type: [Number, String]
			}
		},
		data: function() {
			return {
				goodsInfo: {}
			}
		},
		mounted: function() {
			let that = this;
			$.ajax({
				url: ns.url("servicer://servicer/chat/goodSkuDetial"),
				data: {
					sku_id: that.skuId
				},
				dataType: 'JSON',
				type: 'POST',
				success: function(res) {
					that.goodsInfo = res.data;
					that.goodsInfo.sku_image = ns.img(that.goodsInfo.sku_image);
				}
			});
		},
		template: goodsTemplate
	});

	var orderTemplate = '<div class="order-info-box">';
	orderTemplate += '<img :src="orderInfo.order_goods?orderInfo.order_goods.sku_img:\'\'">';
	orderTemplate += '<div class="order-info">';
	orderTemplate += '<div class="order-No">订单号：<span>{{orderInfo.order_no}}</span></div>';
	orderTemplate += '<div class="order-price">订单金额：<span class="follow-color">￥{{orderInfo.order_money}}</span></div>';
	orderTemplate += '<div class="order-status">';
	orderTemplate += '<span class="follow-color">{{orderInfo.order_status_name}}</span>';
	orderTemplate += '</div>';
	orderTemplate += '</div>';
	orderTemplate += '</div>';

	Vue.component('chat-order', {
		props: {
			orderId: {
				type: [Number, String]
			}
		},
		data: function() {
			return {
				orderInfo: {}
			}
		},
		mounted: function() {
			let that = this;
			$.ajax({
				url: ns.url("servicer://servicer/chat/orderDetail"),
				data: {
					order_id: that.orderId
				},
				dataType: 'JSON',
				type: 'POST',
				success: function(res) {
					if (res.code == 0) {
						that.orderInfo = res.data;
						if (that.orderInfo.order_goods) {
							that.orderInfo.order_goods[0].sku_image = ns.img(that.orderInfo.order_goods[0].sku_image)
						}
					}
				}
			});
		},
		template: orderTemplate
	});

	var vue = new Vue({
		el: ".chat-history-box",
		data: {
			tab_repeat_flag: false,
			shopInfo: {},
			chatPage: {
				currentPage: 1,
				countPage: 1,
				repeat_flag: false
			},

			offlineMembers: [], //下线人数
			onlineMembers: [], //在线人数

			selectMemberList: [], //正在聊天列表

			selectMember: {},

			otherlist: [], //用户的商品或订单信息

			chatMessageList: [] //聊天信息列表
		},
		mounted: function() {
			this.getHistoryMember();
			this.requestChattingPageData(); //给聊天记录绑定上拉滚动事件
			this.findShopInfo();
		},
		computed: {
			numberTotal: function() {
				let num1 = this.offlineMembers ? this.offlineMembers.length : 0;
				let num2 = this.onlineMembers ? this.onlineMembers.length : 0;
				return num1 + num2
			},
			showInfo: function() {
				let obj = {};
				let list = this.otherlist;
				let arr = list.filter(function(v) {
					return v.member_id == this.selectMember.member_id
				});
				if (arr) {
					obj = arr[0]
				}
				return obj
			}
		},
		methods: {
			//获取历史聊天列表
			getHistoryMember() {
				let that = this;
				layui.use('flow', function() {
					var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
					var flow = layui.flow;
					flow.load({
						elem: '#LAY_demo1', //指定列表容器
						scrollElem: '#LAY_demo1',
						isAuto: true,
						mb: 100,
						done: function(page, next) { //到达临界点（默认滚动触发），触发下一页
							var list = [];
							$.ajax({
								url: ns.url("servicer://servicer/index/historyMembers"),
								data: {
									"page": page
								},
								dataType: 'JSON',
								type: 'POST',
								success: function(res) {
									if (res.code == 0) {
										var arr = res.data.offlineMembers ? res.data.offlineMembers.list : [];
										if (arr) {
											arr.forEach(function(v) {
												v.headimg = ns.img(v.headimg);
												that.offlineMembers.push(v);
											})

										}
										next(list.join(''), page < 10); //假设总页数为 10
									} else {
										layer.msg(res.msg);
									}
								}
							});
						}
					});
				});
			},
			//查找当前选中的聊天对象
			edit: function() {
				let arr = this.selectMemberList;
				let newArr = [];
				if (arr) {
					newArr = arr.filter(function(v) {
						return v.select == true;
					})
				}
				if (newArr) {
					this.selectMember = newArr[0];
				} else {
					this.selectMember = {};
				}
			},
			//查询店铺信息
			findShopInfo: function() {
				let that = this;
				$.ajax({
					url: ns.url("servicer://servicer/chat/siteInfo"),
					data: {},
					dataType: 'JSON',
					type: 'POST',
					success: function(res) {
						if (res.code == 0) {
							that.shopInfo = res.data.data;
							that.shopInfo.logo = ns.img(that.shopInfo.logo);
						}
					}
				});
			},
			//查询聊天记录
			findChatList: function() {
				let that = this;
				if (that.chatPage.repeat_flag) return;
				if (!that.selectMember || !that.selectMember.member_id) return;
				$.ajax({
					url: ns.url("servicer://servicer/index/dialogs"),
					data: {
						member_id: that.selectMember.member_id,
						page: that.chatPage.currentPage
					},
					dataType: 'JSON',
					type: 'POST',
					success: function(res) {
						that.chatPage.countPage = res.data.page_count;
						that.chatPage.currentPage += 1;
						that.chatPage.repeat_flag = false;
						if (res.code == 0) {
							that.chatMessageList = res.data.list.reverse().concat(that.chatMessageList ? that.chatMessageList : [])
						}
						if(res.data.list.length){
							that.$nextTick(()=>{
								let height=$($(".chat-massage-box")[9])[0].offsetTop
								$(".chat-content .chat-content-box").scrollTop(height)
							})
						}
					}
				});
			},
			requestChattingPageData: function() {
				var that = this;
				$(".chat-content .chat-content-box").scroll(function(event) {
					if (that.chatPage.repeat_flag) return;
					if (event.currentTarget.scrollTop == 0) {
						that.findChatList();
					}
				})
			},
			//点击选中聊天
			openChat: function(e) {
				let obj = e;
				e.select = true;
				let arr = this.selectMemberList;
				if (arr) {
					let hasItem = false;
					arr.forEach(function (v) {
						if (v.member_id == obj.member_id) {
							hasItem = true;
							v.select = true;
						} else {
							v.select = false;
						}
					});
					if (!hasItem) {
						arr.push(obj);
					}
				} else {
					arr.push(obj);
				}

				this.selectMemberList = arr;
				this.chatPage = {
					currentPage: 1,
					countPage: 1,
					repeat_flag: false
				};
				this.chatMessageList = [];
				this.edit();
				this.findChatList();
			},
			// 删除该聊天
			closeChat: function(e, index) {
				let arr = this.selectMemberList;
				if (!e.select) {
					this.selectMemberList = arr.filter(function(v) {
						return v.member_id != e.member_id
					});
					this.edit();
				} else {
					this.selectMemberList = arr.filter(function (v) {
						return v.member_id != e.member_id
					});
					if (this.selectMemberList.length > 0 && index <= this.selectMemberList.length - 1) {
						this.selectMemberList[index].select = true;
					} else if (this.selectMemberList.length > 0 && index > this.selectMemberList.length - 1) {
						this.selectMemberList[this.selectMemberList.length - 1].select = true;
					}
					this.edit();
					this.chatPage = {
						currentPage: 1,
						countPage: 1,
						repeat_flag: false
					};
					this.chatMessageList = [];
					this.findChatList();
				}
			},
			//切换聊天页面
			selectTab: function(item) {
				for (var i = 0; i < this.selectMemberList.length; i++) {
					if (this.selectMemberList[i].id == item.id) {
						this.selectMember = this.selectMemberList[i];
						this.$set(this.selectMemberList[i], 'select', true)
					} else
						this.$set(this.selectMemberList[i], 'select', false)
				}
				this.$forceUpdate();

				this.chatMessageList = [];
				this.chatPage = {
					currentPage: 1,
					countPage: 1,
					repeat_flag: false
				};
				this.findChatList(true);
			},
			//处理表情信息
			dealmessage: function(v) {
				let html = stringToEmjoy(v);
				return html
			},
		}
	});
</script>
{/block}
{block name="script"}
{/block}
